<template>
  <div class="pho">
    <component
      :class="item.readonly ? 'pho-mask-layer' : ''"
      v-for="item in list"
      :key="item.renderKey"
      v-model="item.__config__.defaultValue"
      v-bind="bindAttr(item)"
      :is="isComName(item)"
      :formConf="formConf"
      :rules="formRules(item)"
      :list.sync="item.__config__.children"
      labelPosition="top"
      :isTop="true"
      :disabled="item.disabled || formConf.disabled"
      :required="item.__config__.required && !item.disabled && !item.readonly"
    />
  </div>
</template>

<script>
import { deepClone, toCamelCase, formRules } from "../../utils/index";

export default {
  name: "phone-form-row-container",
  props: {
    // 表单属性
    formConf: {
      type: Object,
      default: () => {}
    },
    // 表单列表
    list: {
      type: Array,
      default: () => []
    },
    __config__: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    formRules,
    toCamelCase,
    deepClone,
    // 组件名称
    isComName(item) {
      let comName = item.__config__.tag; // 组件名称
      return "phone-" + comName;
    },
    // 对属性进行处理，将__config__ 和__slot__中的属性拿到外层
    bindAttr(item) {
      let attr = deepClone(item);
      if (item.__config__) {
        attr = { ...attr, ...attr.__config__ };
        // delete attr.__config__;
      }
      if (item.__slot__) {
        attr = { ...attr, ...attr.__slot__ };
        // delete attr.__slot__;
      }
      // 将类似"label-width"的属性名改为驼峰命名法
      return toCamelCase(attr);
    }
  }
};
</script>

<style lang="scss" scoped></style>
